前言

會寫這系列文，主要是因為之前的工作開始使用 React 做網頁前端開發。由於我是中途加到專案中，過去也沒有使用 React 的經驗，一開始光是了解團隊開發的架構就花了不少時間，對於 React 很多基礎的觀念都不甚清楚，寫得非常卡，只能處理 layout 相關的問題，和一些簡單的功能。因此希望能透過這次的自我挑戰逼自己花時間去重新了解 React。這系列文章主要是我觀看 udemy 上面的課程 最新react 入門到高級課程，包括 react hooks，以及實戰所做的筆記，希望可以藉由整理的過程釐清細節、方便自己未來可以隨時查詢，也希望能幫忙到少部分跟我一樣學習上比較緩慢的人。

開發環境準備

編輯器

這篇系列文使用的編輯器是 VsCode，可從官網下載。

安裝 node + npm

由於會需要用到套件管理工具 npm，因此我們需要安裝 node.js，在安裝 node 時候 npm 會一併被安裝。可以至 Node.js 官網下載安裝 node.js 主程式。

安裝後可以透過在 terminal 輸入指令 node -v, npm -v來確認有無安裝成功。

使用 n 管理 node 版本

全域安裝 n。

npm install -g n

查看 node 版本列表指令： n list 或 n ls。

安裝 yarn

套件管理工具也可以使用 yarn， mac 用戶（windows 可以直接用 npm 安裝）需要用 HomeBrew 來安裝，要安裝 HomeBrew 可在終端機輸入以下指令。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

如果安裝完畢或已經安裝過，可以用更新指令來檢查安裝狀態

brew install yarn

安裝完 HomeBrew 後，我們就可以用它來安裝 yarn 囉

brew upgrade yarn

小結

到這邊，我們大概就將開發環境準備好了，下一篇會介紹常見安裝 React 的幾種方式。